import React, { Component } from 'react'
import { Button, Table, Pagination, Tooltip } from 'antd'
import axios from 'axios'

import Empty from '@/pages/Dashboard/common/Empty/index'
import request from '@/Utils/fecth'
import { address } from '@/Utils/apiConfig.js'
import CreateModal from './create.js'

import './PolicyList.less'

const { leagueManagement: { policyList }} = address
const CancelToken = axios.CancelToken
let cancel

class PolicyManagement extends Component {
  constructor(props) {
    super(props)
    this.state = {
      pageNo: 1, // 当前页
      pageSize: 10, // 每页的条数
      listData: [],
      loading: false,
      showCreateModal: false,
      searchValue: '',
      totalNum: 4,
      updateData: null,
    }
  }

    getData = async() => {
      const { id } = this.props.match.params
      const { pageNo, pageSize } = this.state
      const option = {
        consortiumId: id,
        pageNum: pageNo,
        pageSize,
      }

      let res = await request().get(policyList.format({ ...option }), {
        cancelToken: new CancelToken(function executor(c) {
          cancel = c
        }),
      })
      if (res && res.status === 200) {
        this.totalList = res.data.data || []
        this.totalNumer = res.data.total || 0
        this.setState({
          listData: res.data.data || [],
          loading: false,
          totalNum: res.data.total || 0,
        })
      } else {
        this.setState({
          loading: false,
        })
      }
    }

    componentDidMount() {
      this.getData()
    }

    componentWillUnmount() {
      if (cancel) {
        cancel()
      }
    }

    onShowSizeChange = (current, pageSize) => {
      let pageNo = this.state.pageNo
      if (this.state.listData.length < pageNo * pageSize) {
        pageNo = Math.ceil(this.state.listData.length / pageSize) || 1
      }
      this.setState({
        pageSize,
        pageNo,
      })
    }

    changePaginationFn = (pageNumber) => {
      this.setState({
        pageNo: pageNumber,
      }, () => {
        this.getData()
      })
    }

    updatePolicyFn = (item) => {
      this.setState({
        updateData: item,
      }, () => {
        this.setState({
          showCreateModal: true,
        })
      })
    }

    createCerClose = (flag) => {
      this.setState({
        showCreateModal: false,
        updateData: null,
      })
      if (flag) {
        this.getData()
      }
    }

    render() {
      const { showCreateModal, listData, totalNum, updateData } = this.state
      const { allOrgList } = this.props
      const columns = [
        {
          title: '策略名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '应用通道',
          dataIndex: 'channel_name',
          key: 'channel_name',
        },
        {
          title: '策略描述',
          dataIndex: 'description',
          key: 'description',
          render: (text) => {
            if (text.length > 15) {
              return (
                <Tooltip placement="bottomLeft" title={text}>
                  <span>{text.slice(0, 15)}...</span>
                </Tooltip>
              )
            } else {
              return (
                <span>{text}</span>
              )
            }
          },
        },
        {
          title: '操作',
          key: 'operate',
          render: (text, record) => {
            return (
              <span className="common-operation" onClick={() => { this.updatePolicyFn(record) }}>更新</span>
            )
          },
        },
      ]
      return (
        <div id="policy-page" className="policy-page common">
          <div className="container">
            <div className="operate">
              <Button type="primary" onClick={() => { this.setState({ showCreateModal: true }) }}>新增策略</Button>
            </div>
            <div className="table-list">
              {/* 列表*/}
              <div className="peer_wrapper">
                <Table
                  columns={columns}
                  getPopupContainer={node => {
                    if (node) {
                      return node.parentNode
                    }
                    return document.body
                  }}
                  onChange={this.handleTableChange}
                  className={listData.length ? '' : 'empty-list'}
                  dataSource={listData}
                  rowKey="id"
                  pagination={false}
                  locale={{
                    emptyText: <div />,
                  }}
                />
                {
                  listData.length ? null : <Empty />
                }
              </div>
              <div className="pagination-box">
                {/* 总数*/}
                {
                  this.state.listData.length > 0 &&
                   <Pagination
                     current={this.state.pageNo}
                     pageSize={this.state.pageSize}
                     showSizeChanger
                     showQuickJumper
                     onShowSizeChange={this.onShowSizeChange}
                     total={totalNum}
                   />
                }
              </div>
            </div>
          </div>
          {
            showCreateModal &&
            <CreateModal {...this.props} data={updateData} orgList={allOrgList} createCerClose={(flag) => { this.createCerClose(flag) }} visible={showCreateModal} />
          }
        </div>
      )
    }
}

export default PolicyManagement
